<template>
  <div>
    <CloudButton type="primary" @click="showDrawer">
      <CloudIcon type="plus" /> New account
    </CloudButton>
    <CloudDrawer
      title="Create a new account"
      :width="720"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <CloudForm :model="form" :rules="rules" ref="form" layout="vertical">
        <CloudRow :gutter="16">
          <CloudCol :span="12">
            <CloudFormItem label="Name" prop="Name">
              <CloudInput v-model="form.Name" placeholder="Please enter user name" />
            </CloudFormItem>
          </CloudCol>
          <CloudCol :span="12">
            <CloudFormItem label="Url" prop="Url">
              <CloudInput
                v-model="form.Url"
                style="width: 100%"
                addon-before="http://"
                addon-after=".com"
                placeholder="please enter url"
              />
            </CloudFormItem>
          </CloudCol>
        </CloudRow>
        <CloudRow :gutter="16">
          <CloudCol :span="12">
            <CloudFormItem label="Owner" prop="Owner">
              <CloudSelect
                v-model="form.Owner"
                :options="OwnerOptions"
                placeholder="Please a-s an owner"
              >
              </CloudSelect>
            </CloudFormItem>
          </CloudCol>
          <CloudCol :span="12">
            <CloudFormItem label="Type" prop="Type">
              <CloudSelect
                v-model="form.Type"
                :options="TypeOptions"
                placeholder="Please choose the type"
              >
              </CloudSelect>
            </CloudFormItem>
          </CloudCol>
        </CloudRow>
        <CloudRow :gutter="16">
          <CloudCol :span="12">
            <CloudFormItem label="Approver" prop="Approver">
              <CloudSelect
                v-model="form.Approver"
                :options="ApproverOptions"
                placeholder="Please choose the approver"
              >
              </CloudSelect>
            </CloudFormItem>
          </CloudCol>
          <CloudCol :span="12">
            <CloudFormItem label="DateTime" prop="DateTime">
              <CloudDatePicker
                v-model="form.DateTime"
                style="width: 100%"
                :get-popup-container="(trigger) => trigger.parentNode"
              />
            </CloudFormItem>
          </CloudCol>
        </CloudRow>
        <CloudRow :gutter="16">
          <CloudCol :span="24">
            <CloudFormItem label="Description" prop="Description">
              <CloudTextarea
                v-model="form.Description"
                :rows="4"
                placeholder="please enter url description"
              />
            </CloudFormItem>
          </CloudCol>
        </CloudRow>
      </CloudForm>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <CloudButton :style="{ marginRight: '8px' }" @click="onClose"> Cancel </CloudButton>
        <CloudButton type="primary" @click="submit"> Submit </CloudButton>
      </div>
    </CloudDrawer>
  </div>
</template>

<script>
  export default {
    title: '2.抽屉表单 ',
    subTitle: '在抽屉中使用表单。',
    data () {
      return {
        visible: false,
        form: {
          Name: "",
          Url: "",
          Owner: "",
          Type: "",
          Approver: "",
          DateTime: "",
          Description: ""
        },
        rules: {
          Name: [{ required: true, message: 'Please enter user name', trigger: 'blur' }],
          Url: [{ required: true, message: 'please enter url', trigger: 'change' }],
          Owner: [{ required: true, message: 'Please a-s an owner', trigger: 'change' }],
          Type: [{ required: true, message: 'Please choose the type', trigger: 'change' }],
          Approver: [{ required: true, message: 'Please choose the approver', trigger: 'change' }],
          Description: [{ required: true, message: 'please enter url description', trigger: 'blur' }],
        },

        OwnerOptions: [
          {
            text: 'xiao',
            value: 'Xiaoxiao Fu'
          },
          {
            text: 'mao',
            value: 'Maomao Zhou '
          }
        ],
        ApproverOptions: [
          {
            text: 'jack',
            value: ' Jack Ma'
          },
          {
            text: 'tom',
            value: 'Tom Liu'
          }
        ],
        TypeOptions: [
          {
            text: 'private',
            value: 'private'
          },
          {
            text: 'Public',
            value: 'Public'
          }
        ],
      }
    },
    methods: {
      showDrawer () {
        this.visible = true;
      },
      onClose () {
        this.visible = false;
      },
      submit (e) {
        this.$refs.form.validate(valid => {
          if (valid) {
            console.log('验证通过了！')
          } else {
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="scss">
</style>